<template>
  <div class="commonTree" style="height: 100%">
    <div class="main-label">
      <div>{{labelName}}</div>
    </div>
    <el-tree :data="data" :props="treeProps" ref="tree" :expand-on-click-node="false"
             :current-node-key="defaultKey" :node-key="nodeKey" @current-change="$emit('treeChange',$event)"
             highlight-current :default-expand-all="!close">
       <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span><i class="el-icon-folder"></i>{{ node.label }}</span>
                </span>
    </el-tree>
  </div>
</template>

<script>
  export default {
      name:'commonTree',
      props:{
          treeProps:Object,
          data:Array,
          labelName:String,
          nodeKey:String,
          close:Boolean
      },
      data(){
          return{
              defaultKey:''
          }
      },
      watch:{
          data(newVal,oldVal) {
              if (newVal.length>0 && this.nodeKey) {
                  this.$nextTick(()=>{
                      this.defaultKey = newVal[0][this.nodeKey]
                      this.$refs.tree.setCurrentKey(this.defaultKey)
                  })
              }
          }
      }
  }
</script>

<style scoped>
  .main-label{
    border: #ccc 1px solid;
    border-bottom: 0;
    background-image: url(../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    height: 27px;
    line-height: 27px;
    font-weight: bold;
    padding-left: 5px;
  }
</style>

